import React, { Component } from 'react'
import axios from "axios";
import PropTypes from "prop-types";
import PubSub from "pubsub-js";
import "./index.css";

export default class Search extends Component {

  static propTypes = {
    updateAppState: PropTypes.func.isRequired
  }

  search = async () => {
    let {keyWordElement: {value: keyWord}} = this;
    // this.props.updateAppState({isFirst: false, isLoading: true, err: ''});

    PubSub.publish('list-state', {isFirst: false, isLoading: true, err: ''})

    /* // 发送请求，使用axios
    axios.get('https://api.github.com/search/users?q='+keyWord).then(
      response => {
        console.log('成功了',response.data)
        // this.props.updateAppState({isLoading: false, list: response.data.items});

        PubSub.publish('list-state', {isLoading: false, list: response.data.items});
      },
      error => {
        console.log('失败了',error)
        // this.props.updateAppState({isLoading: false, err: error.message});

        PubSub.publish('list-state', {isLoading: false, err: error.message});
      }
    )*/

    /* // 发送请求-使用fetch，未优化
    fetch('https://api.github.com/search/users?q='+keyWord).then(
      response => {
        console.log('联系服务器成功了', response);
        return response.json();
      },
      error => { // 网络掉了，服务器不存在等等...
        console.log('联系服务器失败了', error);
        // 这儿需要返回空promise对象，因为如果不返回，就是默认返回undefined。
        // 如果返回的不是promise对象，那外侧的.then就相当于返回成功，然后值为，返回的非promise值 -- undefined。
        // 如果返回的是promise对象，则将返回的promise作为外侧then的实例的promise的值
        // 这儿不返回成功，也不返回失败，就可以不触发下面的.then了
        return new Promise(() => {});
      }
    ).then(
      response => {
        console.log('获取数据成功了', response);
      },
      error => { // 接口地址错误...
        console.log('获取数据失败了', error);
      }
    )
    */

    /*// 发送请求-使用fetch，已优化，统一处理错误
    fetch('https://api.github.com/search/users?q='+keyWord).then(
      response => {
        console.log('联系服务器成功了', response);
        return response.json();
      }
    ).then(
      response => {
        console.log('获取数据成功了', response);
      }
    ).catch(err => {
      console.log('报错了', error);
    })*/

    // 发送请求-使用fetch，已优化，使用async await
    try {
      const response = await fetch('https://api.github.com/search/users?q='+keyWord);
      const data = await response.json();
      console.log(data);
      PubSub.publish('list-state', {isLoading: false, list: data.items});
    } catch(error) {
      console.log('报错了', error);
      PubSub.publish('list-state', {isLoading: false, err: error.message});
    }

  }

  render() {
    return (
      <div className="search-box">
        <input ref={c => this.keyWordElement = c} type="text" placeholder='输入用户名进行搜索'/>
        <button onClick={this.search}>搜索</button>
      </div>
    )
  }
}
